<script setup>
import { onMounted, reactive } from 'vue'
import { Mousewheel } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'

// 滑动插件
const modules = [Mousewheel]

let data = reactive({
  videoList: [], // 视频数据
  playState: false, // 是否正在播放
  current: 1, // 当前播放的是第几个视频
  timeRemaining: '00:00', // 剩余播放时间
  rangeValue: 0 // 进度
})

onMounted(() => {
  getVideoData()
})

// 获取数据
const getVideoData = () => {
  fetch('api/video', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      info: 'get_video'
    })
  })
    .then((res) => res.json())
    .then((res) => {
      data.videoList = res.data
    })
}

// 上滑
const slideNextTransitionStart = () => {
  $(`.swiper .swiper-slide:nth-child(${data.current++}) video`).pause()
  $(`.swiper .swiper-slide:nth-child(${data.current}) video`).play()
  data.playState = true
}
// 下滑
const slidePrevTransitionStart = () => {
  $(`.swiper .swiper-slide:nth-child(${data.current--}) video`).pause()
  $(`.swiper .swiper-slide:nth-child(${data.current}) video`).play()
  data.playState = true
}
// 播放按钮
const videoBtn = (e) => {
  let video = e.target.tagName === 'VIDEO' ? e.target : e.target.parentNode.querySelector('video')
  if (video.paused) {
    video.play()
    data.playState = true
  } else {
    video.pause()
    data.playState = false
  }
}

/**
 * 格式化时间
 * @param {number} second 秒数
 * @return {string} 时间字符串，如：00:13
 */
const formatTime = (second) => {
  function _format(n) {
    if (n < 10) {
      return '0' + n
    }
    return n
  }
  const minutes = _format(parseInt(second / 60))
  second = _format(second - minutes * 60)
  return minutes + ':' + second
}

// 视频播放事件
const timeupdate = (e) => {
  data.rangeValue = (e.target.currentTime / e.target.duration) * 100
  data.currentTime = formatTime(Math.ceil(e.target.duration - e.target.currentTime))
}

// 拉取进度事件
const changeRange = (e) => {
  console.log('拉取进度事件')
  const video = e.target.parentNode.parentNode.querySelector('video')
  video.currentTime = (data.rangeValue / 100) * video.duration
}

function $(selector) {
  return document.querySelector(selector)
}
</script>

<template>
  <swiper
    direction="vertical"
    :slides-per-view="1"
    :modules="modules"
    :mousewheel="true"
    :observer="true"
    :observe-parents="true"
    @slide-next-transition-start="slideNextTransitionStart"
    @slide-prev-transition-start="slidePrevTransitionStart"
  >
    <swiper-slide v-for="d in data.videoList" :key="d._id">
      <video
        class="video-box"
        :src="d.src"
        @click="videoBtn"
        @timeupdate="timeupdate"
        loop
        playsinline="true"
        :poster="d.href"
      ></video>

      <!-- 视频播放按钮 -->
      <button class="video-btn" v-show="!data.playState" @click="videoBtn">Play</button>
      <!-- 视频信息 -->
      <div class="video-info">
        <div class="title">
          <h4>{{ d.title }}</h4>
          <small>@{{ d.username }}</small>
        </div>
        <div class="describe">{{ d.msg }}</div>
      </div>
      <!-- 进度条 -->
      <div class="video-range">
        <input type="range" v-model="data.rangeValue" @input="changeRange" />
        <span>{{ data.currentTime }}</span>
      </div>
    </swiper-slide>
  </swiper>
</template>

<style>
.swiper {
  width: 100%;
  height: 100vh;
  background: #000;
}

.swiper-slide {
  position: relative;
}
.video-box {
  width: 100%;
  height: 100vh;
}

.video-btn {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: none;
  outline: none;
  font-size: 30px;
}

/*视频信息*/
.video-info {
  position: absolute;
  left: 0;
  bottom: 25px;
  color: #fff;
  padding: 15px 10px;
}
.video-info .title h4 {
  color: #e9d91b;
}

.video-range {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  bottom: 10px;
  width: 100%;
  color: #fff;
}
.video-range input {
  display: block;
  height: 3px;
  width: calc(100% - 50px);
}
</style>
